Using Padding shorthand
Description
You can use the padding shorthand property to set the padding for all four edges in a single declaration.
You can specify one to four values for this property.
When you supply four values, they are used to set the padding for the top, right, bottom, and left edges, respectively.
As you omit values, the best-matching specified value is used:
- if you omit the left value, it is the same as the right;
- if you omit the bottom value, it is the same as the top.
- If you omit all but one value, then all four edges take on that same padding value.
Example
The following uses the padding Shorthand Property.
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
p {<!-- w w w. java2 s. c o m-->
border: 10px solid black;
background: lightgray;
border-radius: 1em 4em 1em 4em;
padding: 5px 25px 5px 40px;
}
</style>
</head>
<body>
<p>This is a test.</p>
<p>This is a test.</p>
<p>This is a test.</p>
<p>This is a test.</p>
<p>This is a test.</p>
</body>
</html>